<template>
	<view class="main_box">
		<view class="fix_title">
			5/8填写 Ⅰ 类账户信息
		</view>
		<view class="txt">
			<view>
				为方便您使用电子钱包 （交通银行Ⅲ类户） 进行支付，请绑定一张本人的借记卡。<image src="/static/images/blank/irker.png" mode=""
					@click="enterAffte"></image>
				<text @click="seeBlank">支持银行名单</text>
			</view>
		</view>
		<view class="form_box">
			<view class="inp">
				<view class="left">
					银行卡号
				</view>
				<view class="right">
					<input type="number" v-model.trim="userInfo.cardNo" @blur="getCardName" focus
						placeholder="请填写Ⅰ类卡号">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					银行名称
				</view>
				<view class="right">
					<input type="text" :disabled="isIup" v-model.trim="userInfo.type">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					持卡人姓名
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.userName">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					持卡人身份证
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.idNo">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					银行预留手机
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.phoneNumber">
				</view>
			</view>
			<view class="inps">
				<view class="end">
					<view class="left">
						验证码
					</view>
					<view class="right">
						<input type="number" v-model.trim="userInfo.phoneCode" placeholder="请输入验证码">
					</view>
				</view>
				<view v-show="show" class="end-rg" @click="getCode">
					获取验证码
				</view>
				<view v-show="!show" class="end-rg">
					{{count}}s后重新获取
				</view>
			</view>
		</view>
		<view class="tips">
			<view class="jk">
				温馨提示：
			</view>
			<text>
				如遇银行系统限制或拥堵等原因导致身份验证失败，可换张卡试试，或者详询对应发卡行，谢谢。
			</text>
		</view>
		<view class="btn" @click="toGetFace">
			下一步
		</view>
		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
		<uni-popup ref="popup4" background-color="#fff">
			<view class="popup-content">
				<view class="lps">
					交通银行、建设银行、工商银行、农业银行、邮储银行、中国银行、招商银行、浦发银行、上海银行、上海农村商业银行、上海华瑞银行、东亚银行、大华银行、南洋商业银行、华侨永亨银行、花旗银行、江苏银行、南京银行、苏州银行、江苏长江商业银行、江南农村商业银行、常熟农村商业银行、苏州农村商业银行、昆山农村商业银行、无锡农村商业银行、张家港农村商业银行、江阴农村商业银行、太仓农村商业银行、江苏省农村信用社联合社、浙商银行、杭州银行、嘉兴银行、湖州银行、绍兴银行、金华银行、台州银行、温州银行、浙江稠州商业银行、浙江民泰商业银行、浙江泰
					隆商业银行、宁波银行、宁波东海银行、宁波通商银行、鄞州银行、徽商银行、安徽省农村信用社联合社
				</view>
				<view class="bts" @click="closePuop">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getPhoneCode,
		getTwoUserList,
		putIdentity,
		personFace,
		createNewUser,
		getBlankName
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast,
		_showModal
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				show: true, //控制验证码获取频率
				count: '',
				timer: null,
				userInfo: {
					userName: "",
					type: "",
					idNo: "",
					cardNo: "", //银行卡号
					phoneNumber: "", //手机号
					phoneCode: "", //验证码
					cityName: "",
					areaName: "",
					district: "",
				},
				workCode: "",
				off: false,
				h_liveAddress: "",
				isIup: true,
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		onLoad(option) {
			this.h_liveAddress = option.liveAddress
			this.workCode = option.workCode
			this.userInfo.userName = option.userName
			this.userInfo.idNo = option.idNo
			this.userInfo.cityName = option.cityName
			this.userInfo.areaName = option.areaName
			this.userInfo.district = option.district

		},
		components: {

		},
		methods: {
			closePuop() {
				this.$refs.popup4.close()
			},
			seeBlank() {
				this.$refs.popup4.open("center")
			},
			enterAffte() {
				uni.navigateTo({
					url: "/pageBlank/components/interpretation"
				})
			},
			async getCardName() {
				if (this.userInfo.cardNo == "") {
					_showToast("卡号不能为空")
					this.userInfo.type = ""
				} else {
					if (this.userInfo.cardNo.length < 16) {
						_showToast("卡号长度过短")
						this.userInfo.type = ""
					} else if (this.userInfo.cardNo.length > 19) {
						_showToast("卡号长度过长")
						this.userInfo.type = ""
					} else {
						const res = await getBlankName({
							cardBin: this.userInfo.cardNo,
							orgId: uni.getStorageSync("orgId")
						})
						console.log(res)
						if (res.code == 0) {
							if (res.data) {
								this.userInfo.type = res.data.bankName
							} else {
								this.userInfo.type = ""
								this.isIup = false
								_showToast("未查找到，请手动输入")
							}
						} else {
							this.userInfo.cardNo = ""
							this.userInfo.type = ""
							_showToast(res.msg)
						}
					}

				}

			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack()
			},
			//获取验证码
			async getCode() {
				if (!this.userInfo.phoneNumber) {
					_showToast('请输入手机号!')
					return
				}
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							this.timer = null;
						}
					}, 1000)
				}
				var h_userId = uni.getStorageSync("s_userId");
				uni.showLoading({
					title: "短信发送中"
				})
				console.log(this.userInfo.idNo, this.userInfo.idNo.length)
				const res = await getPhoneCode({
					userId: h_userId,
					mobileNo: this.userInfo.phoneNumber,
					userName: this.userInfo.userName,
					idNo: this.userInfo.idNo,
					orgId: uni.getStorageSync("orgId")
				})
				if (res.code == 0) {
					uni.hideLoading()
					_showToast('验证码已发送')
				} else {
					uni.hideLoading()
					console.log(res)
					_showModal('温馨提示', res.msg)
				}
				this.off = true
			},
			//下一步
			async toGetFace() {
				if (this.off) {
					if (this.userInfo.phoneCode != '') {
						uni.showLoading({
							title: "开户中"
						})
						var h_userId = uni.getStorageSync("s_userId");
						var h_imageOrderNo = uni.getStorageSync("imageOrderNo")
						var h_orderNo = uni.getStorageSync("orderNo")
						console.log(h_orderNo, "-------")
						var h_orgId = uni.getStorageSync("orgId")
						const res = await createNewUser({
							"imageOrderNo": h_imageOrderNo,
							"mobileCode": this.userInfo.phoneCode,
							"liveAddress": this.h_liveAddress,
							"userId": h_userId,
							"orgId": h_orgId,
							"cardBankName": this.userInfo.type,
							"mobileNo": this.userInfo.phoneNumber,
							"userName": this.userInfo.userName,
							"idNo": this.userInfo.idNo,
							"cardNo": this.userInfo.cardNo,
							"cityName": this.userInfo.cityName,
							"livingOrderNo": h_orderNo,
							"workCode": this.workCode,
							"areaName": this.userInfo.areaName,
							"district": this.userInfo.district
						})
						if (res.code == 0) {
							uni.setStorageSync("batId", res.data.batId)
							uni.hideLoading()
							_showToast(res.msg)
							setTimeout(() => {
								uni.navigateTo({
									url: `/pageBlank/successfulOpen/successfulOpen?batId=${res.data.batId}&orgId=${h_orgId}`
								})
							})

						} else {
							uni.hideLoading()
							_showModal('温馨提示', res.msg)
						}
					} else {
						_showModal('温馨提示', "未填写验证码")
					}
				} else {
					_showModal('温馨提示', "未发送验证码")
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		padding: 24upx;
		box-sizing: border-box;
		overflow-y: auto;
		width: 100%;

		.popup-content {
			width: 622rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			opacity: 1;
			box-sizing: border-box;
			padding-top: 29rpx;

			.lps {
				margin: 0 48rpx;
				margin-top: 40rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				color: #000000;
			}

			.bts {
				margin-top: 78rpx;
				background-color: #3478F5;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				border-bottom-left-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
			}
		}

		.kdn {
			margin: 86rpx 0rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 34rpx;
				height: 33rpx;
			}

			.subx {
				margin-left: 8rpx;
				height: 34rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #003A79;
				line-height: 34rpx;
			}
		}

		.tips {
			display: flex;
			flex-direction: column;
			padding: 0rpx 32rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.jk {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #020202;
			}

			text {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #020202;
			}
		}

		.form_box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.inps {
				display: flex;
				align-items: center;

				// margin-bottom: 241rpx;
				.end {
					width: 422rpx;
					height: 87rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					border: 2rpx solid #E6E6E6;
					margin-right: 22rpx;
					display: flex;

					.left {
						margin-left: 21rpx;
						width: 169rpx;
						height: 87rpx;
						line-height: 87rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #6E7077;
						text-align-last: justify
					}

					.right {
						flex: 1;
						height: 87rpx;

						input {
							width: 100%;
							height: 87rpx;
							box-sizing: border-box;
							padding-left: 21rpx;
							font-size: 28rpx;
						}
					}
				}

				.end-rg {
					width: 206rpx;
					height: 87rpx;
					line-height: 87rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					border: 2rpx solid #E6E6E6;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #3478F5;
				}
			}

			.inp {
				width: 650rpx;
				height: 87rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				opacity: 1;
				border: 2rpx solid #E6E6E6;
				display: flex;
				margin-bottom: 9rpx;

				>input {
					width: 650rpx;
					height: 87rpx;
					box-sizing: border-box;
					padding-left: 21rpx;
					font-size: 28rpx;
				}

				.left {
					margin-left: 21rpx;
					width: 169rpx;
					height: 87rpx;
					line-height: 87rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #6E7077;
					text-align-last: justify
				}

				.right_s {
					display: flex;
					flex: 1;
					justify-content: space-between;
					align-items: center;
					margin-left: 23rpx;

					.lg {
						height: 87rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ACACAC;
						line-height: 87rpx;
					}

					.rg {
						height: 87rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						image {
							width: 20rpx;
							height: 10rpx;
							margin-right: 33rpx;
						}
					}

				}

				.right {
					flex: 1;
					height: 87rpx;
					line-height: 87rpx;
					margin-left: 23rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;

					>input {
						width: 100%;
						height: 87rpx;
					}

				}
			}
		}

		.btn {
			width: 358rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #3478F5;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(55, 98, 244, 0.58);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Light, Source Han Sans CN;
			font-weight: 300;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			margin-bottom: 20rpx;
			margin-left: 32rpx;
			display: flex;
			font-size: 30rpx;
			font-weight: 500;
			color: #020202;

			image {
				margin-right: 20rpx;
				width: 22rpx;
				height: 22rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: 500;
				color: #519FF4;
			}
		}
	}
</style>